## 简介
![](./image/api.png)
> vue-api-struct是基于vue框架,为简化开发文档的编写而生的UI组件库。它提供简洁的而不失强大的功能，让你不需花费太大的精力在开发文档页面的编写而只需关注文档的内容。

### 特性
vue-api-struct 支持的特性如下

- 支持markdown直写而不需编译成html文件即可展示
- 支持vue组件（这是不言而喻的）
- graphviz图的展示（通过markdown展示）
- 支持动态组件（远程加载的md，html文件中如果包含自定义标签能被解析，但并非所有的组件都能生效）
- 支持markdown的扩展

### 使用

文档框架支持外部文件，一般情况下为使用html中的iframe链接到外部html文件，展示在页面上。但如果是链接到外部markdown文件，由于浏览器安全策略，宿主html无法获取iframe中的内容，因而无法顺利地将markdown内容解析成要展示的html内容。所以在没有服务器环境的情况下,无法解析markdown文件或包含自定义标签的html。

### 在服务器条件支持下使用

你可以使用任何方式创建服务器环境，只要能提供静态文件的访问功即可。

> 下面介绍在node环境下搭建服务器环境的简便方式

- 1.安装node.js [node.js 下载地址](http://nodejs.cn/download/) ，下载系统对应的版本，然后正确安装它。

- 2.打开终端命令行工具，输入<code>npm -v</code>,如果提示成功，则执行下一步，否则应排查问题所在。

- 3.在终端输入npm install http-server -g 回车，全局安装。

- 4.安装成功后在终端输入http-server 项目目录，然后在浏览器输入地址。 

### 支持本地文件

如果需要加载md，html文件，一般情况下应在服务器环境下使用。如果需要在本地运行，双击或右键 打开方式通过浏览器打开，可以按以下方式操作。

chrome 浏览器 右键 属性

![](./image/chrome.png)

添加
 --args --disable-web-security --user-data-dir

打开浏览器，提示

 ![](./image/chromeNotice.png)

 即可支持动态加载本地文件。
 
 